<template>
  <a-card :bordered="false" class="card-area">
    <a-row type="flex">
      <detail-list style="width: 100%" :col="2">
        <detail-list-item term="学号">{{ info.xh }}&nbsp;</detail-list-item>
        <detail-list-item term="姓名">{{ info.xm }}&nbsp;</detail-list-item>
        <detail-list-item term="性别">{{ info.xbmc }}&nbsp;</detail-list-item>
        <detail-list-item term="院系">{{ info.ssyxmc }}&nbsp;</detail-list-item>
        <detail-list-item term="专业">{{ info.sszymc }}&nbsp;</detail-list-item>
        <detail-list-item term="方向">{{ info.yjfxmc }}&nbsp;</detail-list-item>
        <detail-list-item term="学制">{{ info.xz }}&nbsp;</detail-list-item>
        <detail-list-item term="导师姓名">{{ info.dsxm }}&nbsp;</detail-list-item>
        <detail-list-item term="个人电话">{{ info.lxdh }}&nbsp;</detail-list-item>
        <detail-list-item term="审核状态">{{ info.shztmc }}&nbsp;</detail-list-item>
      </detail-list>
    </a-row>
    <a-form style="margin-top:20px" :form="form" layout="vertical">
      <a-row :gutter="48">
        <a-col :md="12" :sm="24">
          <a-form-item label="实践证明">
            <a-upload
              v-if="!imageUrl"
              name="avatar"
              style="width:120px;height:120px;"
              listType="picture-card"
              class="avatar-uploader"
              :showUploadList="false"
              :action="uploadUrl"
              list-type="picture"
              :headers="{
                Authorization: $store.state.account.token
              }"
              @change="handleChange"
            >
              <div>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">上传照片</div>
              </div>
            </a-upload>
            <template v-if="imageUrl">
              <img :src="imageUrl" style="width: 200px;height: 200px;" alt="avatar" />
              <a-icon class="close-icon" @click="remoteUploadImg" type="close" />
            </template>
            <a-input v-decorator="['sjzm']" type="hidden"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-form-item label="实践单位指导教师评价">
          <a-input
            type="textarea"
            placeholder="请输入实践单位指导教师评价（150字）"
            v-decorator="[
                  'sjdwzdjspj',
                  {
                    rules: [{ required: true, message: '请输入实践单位指导教师评价' }],
                  }
                ]"
            maxlength="150"
            :autosize="{ minRows: 6, maxRows: 10 }"
          />
        </a-form-item>
      </a-row>
      <a-row>
        <a-form-item label="自我总结">
          <a-input
            type="textarea"
            placeholder="工作态度、工作能力、工作成果、协作及敬业精神，限定500字"
            v-decorator="[
                  'zwzj',
                  {
                    rules: [{ required: true, message: '请输入自我总结' }],
                  }
                ]"
            maxlength="500"
            :autosize="{ minRows: 6, maxRows: 10 }"
          />
        </a-form-item>
      </a-row>

      <a-row style="text-align: center">
        <a-button type="primary" @click="addApply">保存</a-button>
        <a-button style="margin-left: 10px;" @click="$router.back()">返回</a-button>
      </a-row>
    </a-form>
  </a-card>
</template>

<script>
import DetailList from "~/tool/DetailList";
const DetailListItem = DetailList.Item;

export default {
  components: { DetailList, DetailListItem },
  computed: {
    routerQuery() {
      return this.$route.query
    }
  },
  data() {
    return {
      uploadUrl: `${process.env.SERVICE_URL}upload/img`,
      imageUrl: "",
      loading: false,
      form: this.$form.createForm(this),
      id: null,
      info: {}
    };
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.$api.degree.zysjjgpjInfo(this.routerQuery.id).then(res => {
        this.info = res.data
        if (res.data.sjzm) {
          this.imageUrl = `${process.env.IMG_URL}${res.data.sjzm}`
        }
        this.form.setFieldsValue(res.data)
      })
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        let path = info.file.response.data[0];
        this.form.setFieldsValue({ sjzm: path });
        this.imageUrl = `${process.env.IMG_URL}${path}`;
        this.loading = false;
      }
    },
    remoteUploadImg () {
      this.imageUrl = ''
      this.form.setFieldsValue({ sjzm: '' });
    },
    addApply(isSubmit) {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        if (!values.sjzm) {
          values.sjzm = ''
        }
        this.$api.degree.zysjjgpjUpate({...values, id: this.routerQuery.id}).then(res => {
          // this.getInfo()
          this.$message.success(res.msg);
          this.$router.back()
        });
      });
    }
  }
};
</script>

<style lange="less" scoped>
.close-icon{
  position: relative;
  top: -90px;
  cursor: pointer;
}
</style>
